<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta name="title" th:content="'商户介绍_'+${title}" />
		<meta name="description" th:content="${description}" />
		<meta name="keywords" th:content="${keywords}" />
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>商户介绍</title>
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/index.js"></script>
		<style>
			.cOYSvF {
				background-color: #f3f8fb;
			}

			.bigImg {
				height: 405px;
				width: 720px;
				margin: auto;
			}

			.bigImg .swiper-wrapper {
				display: flex;
				align-items: center;
			}

			.bigImg video {
				width: 100%;
			}

			.bigImg .swiper-slide img {
				max-width: 100%;
				max-height: 100%;
				width: auto;
				height: auto;
				margin: 0 auto;
				display: block;
			}

			.imgSwiper {
				height: 68px;
				margin: 12px auto;
				padding: 10px 0;
			}
			.imgSwiper .swiper-wrapper{
				justify-content: center;
			}

			.imgSwiper .swiper-slide {
				width: 68px !important;
				height: 68px;
			}

			.imgSwiper .swiper-slide img {
				max-width: 100%;
				max-height: 100%;
				width: auto;
				height: auto;
				margin: 0 auto;
				display: block;
			}

			.imgSwiper .swiper-slide-thumb-active img {
				border-color: rgb(244, 141, 53);
				border-radius: 2px;
				border-style: solid;
				border-width: 1px;
				box-shadow: rgb(244 141 53) 0px 0px 10px 0px;
			}
			.bigImg .swiper-slide{
				display: flex;
				align-items: center;
			}
			@media screen and (max-width: 768px) {
				.bigImg{
					width: 100%;
					height: 300px;
				}
				.company-munber-list{
					width: 50%;
				}
				.company-tab-container{
					border-top: 4px solid #f3f8fb;
				}
				.company-tab-title{
					font-size: 18px;
				}
				.company-tab-title span{
					font-size: 15px;
				}
			}
		</style>
	</head>
	<body>
		<div id="root">
			<div>
				<div class="cOYSvF">
					<div class="header-page"></div>					
					<div class="swiper-shop swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" th:each="banner :${banners}" th:style="'background: url(' + ${banner.images} + ');'">

							</div>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<div class="eZHbVe" style="margin-top: 30px;">
						<div class="fQWhJi">
							<div class="cOQGsL bWxvtx">
								<div class="Mhpno container just-content-between align-center">
									<div class="flex align-center">
										<div class="stand-header-company">
											<span class="mEGBK stand-header-logo">
												<a class="eccJFs link-cursor clickthrough-logo" target="_blank" rel="">
													<img th:src="${shop.logo}"
														class="bWQCCx">
												</a>
											</span>
											<span class="hZjMEj"></span>
										</div>
										<div class="shop-name">
											<p th:text="${shop.name}">北京小米汽车</p>
											<span th:text="${shop.mobile}">400-44444-555</span>
										</div>
									</div>
									<div class="eUJDYj">
										<ul class="stand-header-nav">
											<li class="active">
												<a th:href="@{'../shops/'+${shop.userId}+'.html'}">展商介绍</a>
											</li>
											<li>
												<a  th:href="@{'../shops/'+${shop.userId}+'/product/'+${shop.userId}+'.html'}">主导产品</a>
											</li>

											<li >
												<a th:href="@{'../shops/'+${shop.userId}+'/news/'+${shop.userId}+'.html'}">新闻发布</a>
											</li>
											<li>
												<a
													th:href="@{'../shops/'+${shop.userId}+'/activity/'+${shop.userId}+'.html'}">活动预告</a>
											</li>
											<li>
												<a th:href="@{'../shops/shopInfor-'+${shop.userId}+'.html'}"
													>联系方式</a>
											</li>
											<!-- <li>
												<a href="shopBusiness.html">商机</a>
											</li> -->
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="shop-cont flex just-content-between">
							<div class="shop-box">
								<div class="shop-logo">
									<img src="https://img.directindustry.com/images_di/logo-p/L54752.gif">
								</div>
								<div class="shop-phone">
									<div>
										<div class="shop-nav flex dire-column align-center">
											<a href="shop.html">展商介绍</a>
											<a href="shopProduct.html">展商产品</a>
											<a href="shopNews.html">展商新闻</a>
											<a href="shopActivity.html">展会活动</a>
										</div>
										<div class="line"></div>
									</div>
									<div>
										<div class="shop-lx">
											<p>联系人：张先生</p>
											<p>电话：010126554</p>
											<p>邮箱：12345@com.cn</p>
											<p>微信：zhangxiansheng</p>
											<p>QQ：123456789</p>
										</div>
										<div class="line"></div>
									</div>
								</div>
								<div class="shop-btn flex just-content-between">
									<a href="">在线留言</a>
									<a href="">递交名片</a>
								</div>
							</div>
							<div class="company-tab-container">
								<div class="company-tab">
									<h1 class="company-tab-title">公司名称</h1>
									<h2 class="company-tab-title"><span>关于我们</span></h2>
									<div class="company-tab-text">
										<p th:utext="${shopinfo.info}"> </p>
									</div>
<!--									<div class="company-tab-img">-->
<!--										<div class="company-tab-swiper">-->
<!--											<div class="company-swiper">-->
<!--												<div class="bigImg swiper-container">-->
<!--													<div class="swiper-wrapper">-->
<!--														<div class="swiper-slide">-->
<!--															<video poster="" controls>-->
<!--																<source-->
<!--																	src="https://video.directindustry.com/video_di/videos/video-260531.mp4"-->
<!--																	type="video/mp4">-->
<!--															</video>-->
<!--														</div>-->
<!--														<div class="swiper-slide">-->
<!--															<img src="img/good.jpg" alt="">-->
<!--														</div>-->
<!--														<div class="swiper-slide">-->
<!--															<img src="img/good.jpg" alt="">-->
<!--														</div>-->
<!--													</div>-->
<!--												</div>-->
<!--												<div class="swiper-button-prev"></div>-->
<!--												<div class="swiper-button-next"></div>-->
<!--											</div>-->
<!--											<div class="imgSwiper swiper-container">-->
<!--												<div class="swiper-wrapper">-->
<!--													<div class="swiper-slide">-->
<!--														<img src="img/video.png" alt="">-->
<!--													</div>-->
<!--													<div class="swiper-slide">-->
<!--														<img src="img/good.jpg">-->
<!--													</div>-->
<!--													<div class="swiper-slide">-->
<!--														<img src="img/good.jpg" alt="">-->
<!--													</div>-->
<!--												</div>-->
<!--											</div>-->
<!--										</div>-->
<!--									</div>-->
									<h2 class="company-tab-title" style="margin-top: 30px;"><span>主要客户</span></h2>
									<div class="company-munber clearfix">
										<div class="company-munber-list" th:if="${case.type==0}" th:each="case :${caseEntity}">
											<div class="company-munber-cont">
												<div class="company-munber-img flex align-center just-content-center">
													<img  th:src="${case.images}" alt="">
												</div>
												<p th:text="${case.title}">公司一</p>
											</div>
										</div>

									</div>
									<h2 class="company-tab-title" style="margin-top: 30px;"><span>资质荣誉</span></h2>
									<div class="swiper-comp">
										<div class="swiper-container">
											<div class="swiper-wrapper">
												<div class="swiper-slide" th:if="${cas.type==1}" th:each="cas :${caseEntity}">
													<img th:src="${cas.images}" alt="">
												</div>
											</div>
											<div class="swiper-button-prev"></div>
											<!--左箭头。如果放置在swiper外面，需要自定义样式。-->
											<div class="swiper-button-next"></div>
											<!--右箭头。如果放置在swiper外面，需要自定义样式。-->
										</div>
									</div>
								</div>
							</div>
						</div>
						
					</div>

				</div>
			</div>
			<div class="footer-page"></div>
			<div class="login-cli"></div>
		</div>
		<script>
			$(function() {
				$(".header-page").load("http://122.14.195.113:8089/header.html");
				$(".footer-page").load("http://122.14.195.113:8089/footer.html");
				$(".login-cli").load("http://122.14.195.113:8089/login-cli.html");
			});
			var swiper = new Swiper('.swiper-shop', {
				spaceBetween: 0,
				loop: true,
				autoplay: {
					delay: 3000,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				observer: true,
				observeParents: true,
				watchOverflow: true
			});
			var galleryThumbs = new Swiper('.imgSwiper', {
				slidesPerView: 'auto',
				spaceBetween: 10,
				freeMode: true,
				watchSlidesVisibility: true,
				watchSlidesProgress: true,
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
				observeParents: true, //修改swiper的父元素时，自动初始化swiper
				breakpoints: {
					768: {
						slidesPerView: 4
					}
				}
			});
			var galleryTop = new Swiper('.bigImg', {
				spaceBetween: 10,
				thumbs: {
					swiper: galleryThumbs
				},
				navigation: {
					nextEl: '.company-swiper .swiper-button-next',
					prevEl: '.company-swiper .swiper-button-prev',
				},
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
				observeParents: true //修改swiper的父元素时，自动初始化swiper

			});
			var mySwiper = new Swiper('.swiper-comp .swiper-container', {
				slidesPerView: 'auto',
				spaceBetween: 15,
				loop: true,
				navigation: {
					nextEl: '.swiper-comp .swiper-button-next',
					prevEl: '.swiper-comp .swiper-button-prev',
				},
				observer: true,
				observeParents: true,
				watchOverflow: true,
				breakpoints: {
					768: {
						slidesPerView: 4
					},
					1280: { //当屏幕宽度大于等于1280
						slidesPerView: 7,
					}
				}
			});
		</script>
	</body>
</html>
